import SvgIcon from '../icon'
import styles from './index.module.scss'
import { ReactNode } from 'react'
import { useHistory } from 'react-router'
import classNames from 'classnames'

type props = {
  onBack?: () => void
  title?: ReactNode
  right?: ReactNode
  children?: ReactNode
  className?: string
}
export default function NavBar({ onBack, title, right, children, className }: props) {
  const history = useHistory()
  const onGoback = () => {
    onBack ? onBack() : history.go(-1)
  }
  return (
    <div>
      <div className={classNames(styles.root, className)}>
        <div className="main">
          {/* 后退按钮 */}
          <div className="left" onClick={onGoback}>
            <SvgIcon type="iconfanhui" />
          </div>
          {/* 居中标题 */}
          <div className="title">{title || children}</div>
          {/* 右侧内容 */}
          <div className="right">{right}</div>
        </div>
      </div>
    </div>
  )
}
